﻿<html lang="zh-cn">
<head>
<title>魔法卡片--DIY工具</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<META HTTP-EQUIV="pragma" CONTENT="no-cache, no-store"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="max-age=0, no-cache, no-store"> 
<META HTTP-EQUIV="expires" CONTENT="-1">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="http://appimg2.qq.com/card/ac/css/style_v3.css?timestamp=20121012" type="text/css" media="screen"/>
<style type="text/css">
   #main{width:899px;height:560px;margin-bottom: 5px;}
   .photo_div {
       float: left;
       position: relative;
       border:1pt #DB8426 solid;
       width: 50px;
       height: 50px;
       margin: 2px;
       padding: 1px;
    }
    .photo_shadow{
       border:gold 1px solid;background:#ba843e;color:#333;
       filter:progid:DXImageTransform.Microsoft.Shadow(color=gold,direction=120,strength=4);/*ie*/
       -moz-box-shadow: 2px 2px 10px gold;/*firefox*/
       -webkit-box-shadow: 2px 2px 10px gold;/*safari或chrome*/
       box-shadow:2px 2px 10px gold;/*opera或ie9*/
    }
    a{text-decoration:none;color:#db8426;}
    a:visited{text-decoration:none;color:#5ba4d2;}
    a:hover{text-decoration:none;color:gold;}
   .sub_div{
      width:310;
      border:1pt #DB8426 solid;
      padding:2px;
      max-height:250px;
      margin: 2px;
	  z-index: -1;
   }
   .button1{
      background-position:-210px -90px;
   }.button2{
      background-position:-300px -90px;
   }  
   .span{
      margin-top:2px;margin-right:4px;color:gold;font-size:12px;text-indent:1px;float:right;display:block;width:80px;
      height:28px;border-radius:5px;border-position:absolute;background-image:url(http://appimg2.qq.com/card/ac/img/icon.png?v=81);
      background-repeat:no-repeat;cursor:pointer
	}
   span.m_select{color:gold;width:66px; height:30px; background-image:url(http://appimg2.qq.com/card/ac/img/icon.png?v=81); 
           background-position:-460px -335px;padding: 4px 21px 4px 10px;cursor:pointer}
   span:hover{color:#5ba4d2;}
   .setbox{background:#fff;padding:10px;border:1px solid #ccc;z-index:19;position:absolute;width: 200px;left:170px;}	
   .setbox ul li{line-height:25px;border-bottom:1px solid #eee;z-index:29;}
   .setbox ul li span:hover{color:#5ba4d2;cursor:pointer}
   .SA{position: absolute;top: -10px;z-index: -1;}	
   .SA em {z-index: 99;font-style: normal;}
   .SA em, .SA span {
    color: #99DBF2;
    font-family: Simsun;
    font-size: 16px;
    height: 17px;
    line-height: 21px;
    overflow: hidden;
    position: absolute;
    width: 8px;
    font-weight: normal;
    height: 18px;
    width: 17px;
	color: #FFFFFF;
    left: 0;
    top: 1px;
	z-index:999;
   }
</style>
</head>
<body class="">
<div class="wrapper_secondaryContent wrapper_secondaryContent_v2">
 <div class="wrapper">
  <div class="container" id="container">
   <div class="header_v2">
		<div class="map">
			<h1><a href='javascript:$("#aa").attr("href","http://appimg2.qq.com/card/index_v3.html")[0].click();' title=""></a><a id="aa" href="" target="_blank"></a></h1>
			<ul>
               <li class="map_home_active"><a href="http://appimg2.qq.com/card/index_v3.html" target="_blank">魔法屋</a></li> 
               
            </ul>
		</div>
	</div>
   <!--main 开始-->
   <div class="main museum_mod" style="padding-bottom: 260px;" >

    <div class="cont"> 
     <div style="" class="course_global" id="ID_DIV_HOT">
                <!--   内容区域  -->
	     <div class="shelves  hotcard">
           <table id="main" border="1" bordercolor="#DB8426">
              <tr>
                  <td style="vertical-align:top;width:300px;">
                     <div class="sub_div">                                                                                          
                        <input id="QQ1" onkeyup="this.value=this.value.replace(/\D/g,'');" value="请输入对方QQ号码" onfocus="check1('QQ1');" onblur="check2('QQ1');"  style="width:210;"/>
                        <input type="button" value="查看目标卡友" onclick="mfkp($('#QQ1').val());"/><br/>
                        <input id="QQ2" onkeyup="this.value=this.value.replace(/\D/g,'');" value="否则为自己卡箱" onfocus="check1('QQ2');" onblur="check2('QQ2');" style="width:210;"/>
                        <input type="button" value="查看目标卡友" onclick="mfkp($('#QQ2').val());"/>
                     </div>
                     <div class="sub_div">                      
                        <textarea id="qqs" rows="2" cols="32" onfocus="check1('qqs');">导入N个QQ以空格隔开，例如：402157562 573961530</textarea>
                        <span class="span button1" onclick="dosplit();" >生成链接地址</span> 
                     </div>
					 <div  class="sub_div" id="music"></div>
                     <div class="sub_div">
                         <input id="pre_time" style="width:72;" value="5" onkeyup="this.value=this.value.replace(/\D/g,'');"/>
                         <input id="new_card_button" type="button" value="开始检测新卡" onclick="count++;refresh();" disabled="disabled"/>
                         <span id="new_card_tips" style="color:gold"></span><br>
						 <input id="music_info" value="Loves Me Not#t.a.t.u."/>
						 <input type="button" value="歌曲试听" onclick='startMusic($("#music_info").val())'/>

						 <span class="m_select" id="m_select" title="顺序" onClick="open_select()">选择歌曲</span>
			             <div id='m_div' class="setbox" style="display:none;">
			                  <div class="SA" style="left:43.5px;">
                                   <em>◆</em><span>◆</span>
                              </div>
		                 </div> 
                     </div>					 
                     <div class="sub_div" style="overflow:auto;">
                         <ul id="visited" class="menu_dropmu" style="float:left">              
                            <li><a href="javascript:void(0);">访问历史</a></li>
                         </ul>
                         <ul id="friends" class="menu_dropmu" style="float:left;">                            
                            <li><a href="javascript:void(0);">友情链接</a></li>                              
                            <li><a href="http://www.cardmarket.top" target="_blank">换卡平台I</a></li>                      
                       		<li><a href=" http://bbs.open.qq.com/forum.php?mod=viewthread&tid=217686" target="_blank">换卡平台II</a></li>                      
                         </ul>
                         <ul id="new_card_info" class="menu_dropmu" style="float:left">                            
                            <li><a href="javascript:void(0);">新卡检测信息</a></li>                          
                         </ul>
                       </div>
                  </td>
                  <td style="vertical-align:top;max-width:150px;width:135px;">
                       <div align="center"><a href="javascript:void(0)">面值对照表</a></div>
                       <div style="overflow:auto;max-height:512;" >
                      	<ul id="cardPrice" class="menu_dropmu" ></ul>
                       </div>
                  </td>
                  <td style="vertical-align:top;width:500px;height:500px;">
                      <div style="padding:2px">
                           <p id="priceHeader" style="color:red;"></p>                           
                           <p id="priceBody" style="color:lightskyblue;padding-left:10px;"></p>
                       </div>
                  </td>
                </tr>
				<tr> <td colspan="3"></td></tr>
              </table>
               
		 </div>
		 <div class="museum_bottom" ></div>
		</div>

     
     <!--博物馆模块 结束--> 
    </div>
   </div>   
   <!--main 结束-->
  </div>
 </div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
	 loadContent();//加载主页面头像
	 loadButton();//头像点击事件
});
function loadButton(){
     $(".button1").mousedown(function(){
	    $(this).attr("class","span button2");
	 }).mouseup(function(){
	    $(this).attr("class","span button1");
	 });
	 
	 $('#m_div ul li').children().bind('click',function(e){
	   var music = $(e.currentTarget).text();
	   console.log(music);	  
	   startMusic(music);	 
	   $("#m_div").hide();
	 });
}
<!--  加载主要内容 -->
function loadContent(){	    
     loadCardInfoJs();
     loadMusic();
}
<!-- 加载歌曲信息-->
function loadMusic(){
	var initmusic =["Loves Me Not#t.a.t.u.","风吹麦浪#李健,孙俪","我们都一样#张杰","说谎#林宥嘉","千千阙歌#陈慧娴","电音之王#王绎龙"];
	var htmlstr ="<div><ul style='overflow:auto;height:300px;'><li><span>单曲</span>&nbsp;&nbsp;<span>顺序</span>&nbsp;&nbsp;<span>随机</span></li>";
    for(var i=0;i<initmusic.length;i++){
      htmlstr += "<li><span>"+initmusic[i]+"</span></li>";
    }	
	$(htmlstr+"</ul></div>").appendTo("#m_div");
}
var theme_num = 0;var ref_handle;var count = 0;
   <!--  加载新卡js信息-->
function loadCardInfoJs(){
	 var a=document.createElement('script');
     a.setAttribute('src','http://appimg2.qq.com/card/mk/card_info_v3.js?time='+new Date());
	 a.setAttribute('charset','utf-8');
     document.body.appendChild(a);
	 setTimeout(readCardInfoJs, 5000);	
}
function readCardInfoJs(){	
	if(typeof theme_card_list != 'undefined'){
	  loadCardPrice();
	  theme_num = theme_card_list.length;
      theme_card_list.sort(function(a,b){return b[3]-a[3];});
      $('#new_card_tips').html('共'+(theme_num-1)+'套卡 最新:'+theme_card_list[0][1]).css("color","gold");
      $('#new_card_button').removeAttr('disabled');
	}else{
	  $('#new_card_tips').html("网络繁忙，读取数据失败。").css("color","red"); 
	   setTimeout(loadCardInfoJs, 1000);
	}   
}
<!-- 加载面值对照表 -->
function loadCardPrice(){
	 priceMap = new Map();
	 priceList = [];
	 for(var i=0;i<card_list.length;i++){
		var price = card_list[i][3];
		var themeName = findThemeNameById(card_list[i][1]);
		var themes = priceMap.get(price);
		if(!themes){
			themes = [];
			priceList.push(price);
		}
		if(themes.indexOf(themeName)==-1){
			themes.push(themeName);
			priceMap.set(price,themes);
		}
	 }
	 priceList.sort(function(a,b){return a-b;})
	 for(var i=0;i<priceList.length;i++){
		 $("#cardPrice").append(' <li><a href="javascript:showThemeCard('+priceList[i]+')">'+priceList[i]+'</a></li>'); 
	 }
	 
}
function findThemeNameById(themeId){
	for(var i=0;i<theme_card_list.length;i++){
		if(theme_card_list[i][0]==themeId){
			return theme_card_list[i][1];
		}
	}
	return;
}
function showThemeCard(price){
	$("#priceHeader").html(price+"面值的套卡");
	$("#priceBody").html(priceMap.get(price).toString());
}
function open_select(){
	if($("#m_div").css('display')=='none'){
	   $("#m_div").show();
	}else{
	   $("#m_div").hide();
	}		
}

<!--刷新方法，每隔N秒刷新-->
function refresh(){
	if(count%2==0){
		clearTimeout(ref_handle);
        $('#new_card_button').val('开始检测新卡');
        return;
	}
   $('#new_card_button').val('停止检测');
   var myDate = new Date();
   var hours=(myDate.getHours()<10)?'0'+myDate.getHours():myDate.getHours();
   var mins=(myDate.getMinutes()<10)?'0'+myDate.getMinutes():myDate.getMinutes();
   var secs=(myDate.getSeconds()<10)?'0'+myDate.getSeconds():myDate.getSeconds();
   var timestamp = myDate.valueOf();
   var wait_time = parseInt($('#pre_time').val())*1000;
   var a=document.createElement('script');
   a.setAttribute('charset','utf-8');
   a.setAttribute('src','http://appimg2.qq.com/card/mk/card_info_v3.js?timestamp='+timestamp);
   document.body.appendChild(a);
   if(theme_card_list.length > theme_num){      
	   startMusic($('#m_select').attr("title"));//新卡出现，音乐提醒
       setTimeout(checkOutNewCard,3000);
   }else{ 
	   var li = document.createElement('li');
       $(li).html('<a  href="javascript:;">'+hours+':'+mins+':'+secs+'-无</a></li>');
	   $(li).insertBefore($("#new_card_info li:first-child"));
   }   
   a=document.getElementsByTagName('script');
   if(typeof a[3] != 'undefined')document.body.removeChild(a[2]);
   ref_handle = setTimeout(refresh, wait_time);
}

function checkOutNewCard(){
	 theme_card_list.sort(function(a,b){return b[3]-a[3];});
	 alert('新套卡“'+theme_card_list[0][1]+'”已经上市，随后跳转魔法卡片...');
	 window.open('http://appimg2.qq.com/card/index_v3.html','mfkp');
	 var li = document.createElement('li');
	 $(li).html('<a  href="http://appimg2.qq.com/card/index_v3.html" target="_blank">'+theme_card_list[0][1]+'</a></li>');
	 $(li).insertBefore($("#new_card_info li:first-child"));
	 count++;
	 loadCardInfoJs();
}

var qq;
function check1(str){
 qq = document.getElementById(str).value;
 document.getElementById(str).value="";
}
function check2(str){
 document.getElementById(str).value=document.getElementById(str).value.replace(/\D/g,'');
 if(document.getElementById(str).value=='')
   document.getElementById(str).value=qq;
 if(qq==''||qq==null)
   document.getElementById(str).value='请输入对方QQ号码';
}

<!-- 输入多个QQ，切分它们为链接-->
function dosplit(){
  var str = document.getElementById('qqs').value;
  var substr = str.split(/\s/);
  for(var i=substr.length-1;i>=0;i--){
     substr[i]=substr[i].replace(/\D/g,'');
     if(substr[i]=='')return;
     createlist(substr[i]);
  }
}

<!--  提示收藏方法 -->
function addFavor(){   
       alert("提示！请使用Ctrl+D进行收藏"); 	
}

<!-- 输入或复制QQ查看目标换卡箱 -->
function mfkp(qq){
   if(qq=="请输入对方QQ号码"||qq=="否则为自己卡箱"||qq=="") qq="自己卡箱";
   var aa = document.getElementById('aa');
   aa.href="http://appimg2.qq.com/card/index_v3.html#opuin="+qq.replace(/\D/g,'');
   aa.click();
   createlist(qq);
}

<!-- 添加访问记录 -->
function createlist(qq){
  var li = document.createElement('li');
  $(li).html('<a target="_blank" href="http://appimg2.qq.com/card/index_v3.html#opuin='+qq+'">'+qq+'</a></li>');
  $(li).insertBefore($("#visited li:first-child"));
}

<!-- 音乐播放 -->
var musicCount = 0;var musicTimer;var single=false;
function startMusic(music){
	var info;
    if(music=='单曲'){
		single=true;
		music = $("#m_select").attr("title");
	}
	if(typeof music =='undefined'||music=='随机'||music=='顺序'){		
	    if(music=='顺序') musicCount ++;
	    else if(music=='随机') musicCount+=Math.round(Math.random()*10+1);
		var nth = musicCount%($('#m_div ul').children().length-1)+1;
       info = $('#m_div ul :nth-child('+nth+')').children().first().text().split(/[\/、#:：&]+/);
	   clearTimeout(musicTimer);
	   single=false;
	   musicTimer = setTimeout(startMusic,210000);
	}else{
       clearTimeout(musicTimer);
       
	   info = music.split(/[\/、#:：&]+/);
	}
	var artist = "";
	if(typeof info[1]!='undefined')artist = '&artist='+info[1];
    $("#m_select").attr("title",info[0]+"#"+info[1]);
	$("#music").html('<embed width="310px" height="85px" style="z-index: -12;" src="http://box.baidu.com/widget/flash/mbsong.swf?name='+info[0]+artist+'&autoPlay=true&loop='+single+'"/>');
}
</script>